<div class="box box-default">
    <div class="box-body">
        <form class="form-inline">
            <div class="box box-default">
                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;margin-bottom:8px !important;">
                    <button type="button" class="btn btn-primary" *ngIf="_.includes(menuResourceSet,'btn-oto-detail')" (click)="edit('one')">
                        <i class="fa fa-edit"></i>查看</button>
                    <button type="button" class="btn btn-primary" *ngIf="_.includes(menuResourceSet,'btn-oto-renewal')" (click)="goRenew()">
                        <i class="fa fa-check-square-o"></i>续约</button>
                    <button type="button" class="btn btn-primary" *ngIf="_.includes(menuResourceSet,'btn-oto-stop')" (click)="goStop()">
                        <i class="fa fa-minus-circle"></i>终止</button>
                    <button *ngIf="_.includes(menuResourceSet,'btn-oto-export')" type="button" class="btn btn-primary" (click)="exportExcel()">
                        <i class="fa fa-sign-out"></i>导出</button>
                    <button type="button" class="btn btn-box-tool pull-right" data-widget="collapse">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
                <div class="box-body" style="display:block">
                    <div class="form-group">
                        <label class="control-label">产品名称：</label>
                        <input type="text" class="form-control" name="sFullName" id="productName" [(ngModel)]="getOneononePost.sFullName" placeholder="产品名称">
                    </div>
                    <div class="form-group">
                        <label class="control-label">产品代码：</label>
                        <input type="text" class="form-control" name="sFundCode" id="productCode" [(ngModel)]="getOneononePost.sFundCode" placeholder="产品代码">
                    </div>
                    <div class="form-group col-lg-12" style="margin-top:5px">
                        <label class="control-label">委托人：</label>
                        <input type="text" class="form-control" name="sPrincipal" [(ngModel)]="getOneononePost.sPrincipal" placeholder="委托人">
                        <label class="control-label" style="padding-left:13px;">托管人：</label>
                        <!-- <input type="text" class="form-control" maxlength="500" name="sTrustee" [(ngModel)]="getOneononePost.sTrustee" placeholder="托管人"> -->
                        <select class="form-control select2" maxlength="500" id="sTrusteeSelected" [(ngModel)]="getOneononePost.sTrustee" name="sTrustee">
                            <option [value]="''">--请选择--</option>
                            <option [value]="item.sItemValue" *ngFor="let item of distionary.TRUSTEE">{{item.sItemValue}}</option>
                          </select>
                        <button type="button" class="btn btn-primary" (click)="list(1)">
                            <i class="fa fa-search"></i>查询</button>
                    </div>
                </div>
            </div>
        </form>

        <div class="box-body" style="padding-left:0px;padding-right:0px;">
            <!-- updated by dujh @20180703 修改表格变为可拉伸 -->
            <div style="overflow-x:scroll;height:450px" id="yclyyzList" class="tbHeaderFix">
                <table class="table table-bordered table-keep-line table-hover table-striped">
                    <thead>
                        <tr>
                            <th style="padding-left:20px !important;" class="width-5">
                                <div class="checkbox checkbox-primary">
                                    <input type="checkbox" id="checkboxAll" [(ngModel)]="isCheckedAll" (ngModelChange)="checkedAll()">
                                    <label>
                                    </label>
                                </div>
                            </th>
                            <th class="width-8" (click)="orderData('sFundCode')">产品代码<i class="fa fa-sort"></i></th>
                            <th class="width-10" (click)="orderData('sFundName')">产品简称<i class="fa fa-sort"></i></th>
                            <th class="width-15" (click)="orderData('sPrincipal')">委托人<i class="fa fa-sort"></i></th>
                            <th class="width-15" (click)="orderData('sTrustee')">托管人<i class="fa fa-sort"></i></th>
                            <th class="width-10" (click)="orderData('sFundCategoryZh')">产品类别<i class="fa fa-sort"></i></th>
                            <th class="width-10" (click)="orderData('dBegin')">运作起始日<i class="fa fa-sort"></i></th>
                            <th class="width-9" (click)="orderData('dEnd')">到期日<i class="fa fa-sort"></i></th>
                            <th class="width-10" (click)="orderData('sIsRenewal')">是否自动续约<i class="fa fa-sort"></i></th>
                            <th class="width-8" (click)="orderData('sSalesman')">销售员<i class="fa fa-sort"></i></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of oneononeList">
                            <td style="padding-left:20px !important;" class="width-5">
                                <div class="checkbox checkbox-primary">
                                    <input type="checkbox" id="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
                                    <label>
                                    </label>
                                </div>
                            </td>
                            <td class="width-8 short_name" (dblclick)="edit('dbclick',item)" [attr.title]="item.sFundCode">{{item.sFundCode}}</td>
                            <td class="width-10 short_name" (dblclick)="edit('dbclick',item)" [attr.title]="item.sFullName">{{item.sFundName}}</td>
                            <td class="width-15 short_name" (dblclick)="edit('dbclick',item)" [attr.title]="item.sPrincipal">{{item.sPrincipal}}</td>
                            <td class="width-15 short_name" (dblclick)="edit('dbclick',item)" [attr.title]="item.sTrustee">{{item.sTrustee}}</td>
                            <td class="width-10 short_name" (dblclick)="edit('dbclick',item)" [attr.title]="item.sFundCategoryZh">
                                <span>{{item.sFundCategoryZh}}</span>
                            </td>
                            <td class="width-10 short_name" (dblclick)="edit('dbclick',item)" [attr.title]="item.dBegin">{{item.dBegin}}</td>
                            <td class="width-9 short_name" (dblclick)="edit('dbclick',item)">{{item.dEnd}}</td>
                            <td class="width-10 short_name" (dblclick)="edit('dbclick',item)">
                                {{item.sIsRenewal}}
                            </td>
                            <td class="width-8 short_name" (dblclick)="edit('dbclick',item)" [attr.title]="item.sSalesman">{{item.sSalesman}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="box-footer clearfix">
            <app-pagination [currentPageNum]="oneononeListPageInfo.currentPageNum" [pagesShow]="" [totalPages]="oneononeListPageInfo.totalPages"
                (pageChanged)="oneononePageNavigation($event)">
                <div class="pull-left pagination-detail" data-pagination-additional="true">
                    <span class="pagination-info">
                        当前显示第{{oneononeListPageInfo.startRow}}到第{{oneononeListPageInfo.endRow}}条，总共{{oneononeListPageInfo.total}}条，
                    </span>
                    <span class="page-list">
                        每页记录
                        <span class="btn-group dropup">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="page-size">{{oneononeListPageInfo.pageSize}}</span>
                    <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li *ngFor="let i of oneononeListPageInfo.pageList" role="menuitem" [class.active]="oneononeListPageInfo.pageSize === i"
                            (click)="oneononepageSizeChange(i)">
                            <a>{{i}}</a>
                        </li>
                    </ul>
                    </span>条
                    </span>
                </div>
            </app-pagination>
        </div>
    </div>
</div>


<!-- 续约modal -->
<div class="modal modal-detail" id="renewProduct">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">产品续约</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group" style="margin-top:20px">
                        <label class="col-lg-3 text-right">
                            <span class="span-style">*</span>新的到期日期:</label>
                        <div class="col-lg-5">
                            <div class="input-group date form_datetime">
                                <span class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </span>
                                <input class="form-control" type="text" style="background: white; cursor: pointer;" name="dEnd" [(ngModel)]="otoProductBody.dEnd"
                                    mwlFlatpickr [ngModelOptions]="{standalone: false}">
                            </div>
                        </div>

                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" (click)="productRenew()">
                    <i class="fa fa-save"></i>保存</button>
                <button type="button" class="btn btn-primary" (click)="resetEndDate()">
                    <i class="fa fa-circle-o-notch"></i>重置</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- 终止modal -->
<div class="modal modal-detail" id="stopProduct">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">终止产品</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group" style="margin-top:20px">
                        <label class="col-lg-2 text-right">
                            <span class="span-style">*</span>终止日期:</label>
                        <div class="col-lg-3">
                            <div class="input-group date form_datetime">
                                <span class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </span>
                                <input class="form-control" type="text" style="background: white; cursor: pointer;" name="dStop" [(ngModel)]="otoProductBody.dStop"
                                    mwlFlatpickr [ngModelOptions]="{standalone: false}">
                            </div>
                        </div>
                        <label class="col-lg-2 text-right">
                            <span class="span-style">*</span>终止方式:</label>
                        <div class="col-lg-3">
                            <select class="form-control" [(ngModel)]="otoProductBody.sStopType" name="sStopType">
                                <option [value]="item.sItemKey" *ngFor="let item of dictionaryList.STOP_TYPE">{{item.sItemValue}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-2 text-right">终止原因:</label>
                        <div class="col-lg-8">
                            <textarea name="" cols="20" rows="5" maxlength="250" style="width:100%" [(ngModel)]="otoProductBody.sStopReason" name="sStopReason"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" (click)="productStop()">
                    <i class="fa fa-save"></i>保存</button>
                <button type="button" class="btn btn-primary" (click)="resetStop()">
                    <i class="fa fa-circle-o-notch"></i>重置</button>
            </div>
        </div>
    </div>
</div>